<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<canvas id="canvas1" width="300" height="300" style="border:1px solid #d3d3d3;background:#ffffff;"></canvas>
		<canvas id="canvas" width="300" height="300" style="border:1px solid #d3d3d3;background:#ffffff;"></canvas>
		<script type="text/javascript">
			
			var can1 = document.getElementById('canvas1');
			var ctx1 = can1.getContext('2d');
			//			ctx1.fillStyle = 'rgb(200,2,200)';
			//			ctx1.fillRect(10,10,55,50)
			//			ctx1.fillStyle = "rgba(0, 0, 200, 0.5)";
			//     		ctx1.fillRect (30, 30, 55, 50);

			var ctx = can1.getContext('2d')
			//     		ctx1.fillRect (30, 30, 55, 50);
			// 		    ctx.fillRect(25,25,100,100);
			//		    ctx.clearRect(45,45,60,60);
			//		    ctx.strokeRect(50,50,50,50);

			//			 ctx.beginPath();
			//  ctx.moveTo(75,50);
			//  ctx.lineTo(100,75);
			//  ctx.lineTo(100,25);
			//  ctx.fill();
			ctx.lineWidth = "10";
			ctx.beginPath();
			ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
			ctx.moveTo(110, 75);
			ctx.arc(75, 75, 35, 0, Math.PI, false); // 口(顺时针)
			ctx.moveTo(65, 65);
			ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
			ctx.moveTo(95, 65);
			ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼
			ctx.stroke();

			function draw() {
				var ctx = document.getElementById('canvas').getContext('2d');
				ctx.fillRect(0, 0, 300, 300);
				for(var i = 0; i < 3; i++) {
					for(var j = 0; j < 3; j++) {
						ctx.save();
						ctx.strokeStyle = "#9CFF00";
						ctx.translate(50 + j * 100, 50 + i * 100);
						drawSpirograph(ctx, 20 * (j + 2) / (j + 1), -8 * (i + 3) / (i + 1), 10);
						ctx.restore();
					}
				}
			}

			function drawSpirograph(ctx, R, r, O) {
				var x1 = R - O;
				var y1 = 0;
				var i = 1;
				ctx.beginPath();
				ctx.moveTo(x1, y1);
				do {
					if(i > 20000) break;
					var x2 = (R + r) * Math.cos(i * Math.PI / 72) - (r + O) * Math.cos(((R + r) / r) * (i * Math.PI / 72))
					var y2 = (R + r) * Math.sin(i * Math.PI / 72) - (r + O) * Math.sin(((R + r) / r) * (i * Math.PI / 72))
					ctx.lineTo(x2, y2);
					x1 = x2;
					y1 = y2;
					i++;
				} while (x2 != R - O && y2 != 0);
				ctx.stroke();
			}

			//			function draw() {
			//				var ctx = document.getElementById('canvas').getContext('2d');
			//
			//				ctx.fillRect(0, 0, 150, 150); // 使用默认设置绘制一个矩形
			//				ctx.save(); // 保存默认状态
			//
			//				ctx.fillStyle = '#F0AD4E' // 在原有配置基础上对颜色做改变
			//				ctx.fillRect(15, 15, 120, 120); // 使用新的设置绘制一个矩形
			//
			//				ctx.save(); // 保存当前状态
			//				ctx.fillStyle = '#FFF' // 再次改变颜色配置
			////				ctx.globalAlpha = 0.5;
			//				ctx.fillRect(30, 30, 90, 90); // 使用新的配置绘制一个矩形
			//
			//				ctx.restore(); // 重新加载之前的颜色状态
			//				ctx.fillRect(45, 45, 60, 60); // 使用上一次的配置绘制一个矩形
			//
			//				ctx.restore(); // 加载默认颜色配置
			//				ctx.fillRect(60, 60, 30, 30); // 使用加载的配置绘制一个矩形
			//			}

//			draw()
		</script>
	</body>

</html>